<template>
  <div id="view_classify">
<!--
  该页面未在开发范围中
  -->
    <div class="view_classify_header">
      <module-header :head_index="nav_classify_index"/>
      <div class="view_classify_container">

        <el-container>
          <el-aside width="20%" class="text-left view_classify_container_aside" >
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span slot="title">导航一</span>
                </template>
                <el-menu-item-group>
                  <span slot="title">分组一</span>
                  <el-menu-item index="1-1">选项1</el-menu-item>
                  <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                  <span slot="title">选项4</span>
                  <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main class="text-left view_classify_container_main">
            <div class="view_classify_container_main_children">
              <el-col :span="8">
                <el-card shadow="hover">
                  该页面暂未开发，请后续再看
                </el-card>
              </el-col>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import moduleHeader from '../components/Common/Header'
export default {
  name: 'Classify',
  components: {
    moduleHeader
  },
  data () {
    return {
      nav_classify_index: 3, // 对应导航栏中的分类的索引
      tabPosition: 'left', // 控制导航栏的显示方式
      isCollapse: true // 控制右侧导航栏是否缩放
    }
  },
  methods: {
    // 右侧导航栏的函数
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less" scoped>
#view_classify{
  width: 100%;
  height: 100%;
  .view_classify_header {
    width: 100%;
    height: 95px;
    border-bottom: 2px solid gainsboro;
    background: white;
    position: fixed;
  }
  .view_classify_container{
    width: 75%;
    background: red;
    margin: 0 auto;
    margin-top: 10px;
    height: 620px;
    overflow: auto;
    border: 1px solid gainsboro;
    .view_classify_container_aside{
      height: 620px;
      background:white;
    }
    .view_classify_container_main{
      height: 620px;
      background: yellow;
      overflow: auto;
      .view_classify_container_main_children{
        width: 100%;
        height: 10000px;
        background: tomato;
      }
    }
  }
}
</style>
